<template>
    <div class="tabbar-component-container">
        <ul class="tabbar-component-list">
            <li class="tabbar-component-item" :class="{tci_activated: this.sel=='play'}" @click="fn('play')">直播</li>
            <li class="tabbar-component-item" v-if="menusrule.iscom" :class="{tci_activated: this.sel=='chat'}"
                @click="fn('chat')">边看边聊
            </li>
            <li class="tabbar-component-item" v-if="menusrule.ishall" :class="{tci_activated: this.sel=='hall'}"
                @click="fn('hall')">直播厅
            </li>
            <div class="clearBoth"></div>
        </ul>
        <div class="tabbar-component-view">
            <img src="../assets/images/eye.png"/>&nbsp;{{this.simpleNum(vnum)}}
        </div>
        <div class="clearBoth"></div>
    </div>
</template>

<script>
    export default {
        data: function () {
            return {
                sel: "play"
            }
        },
        methods: {
            fn: function (val) {
                this.sel = val;                     // tabbar切换
                this.$emit("change", this.sel);
                console.log(this.sel);
                if(this.$route.name=="Live"){
                    if($(".fixedBottom").is(':hidden')){
                        $(".edit-component-container").css("bottom","0");
                        $(".edit-takeup").css("height","3.8rem");
                        $("#live_hall_container").css("padding-bottom","0");
                    }
                }

            }
        },
        props: {
            vnum: {
                type: Number
            },
            menusrule: {
                type: Object,
                default: function () {
                    return {
                        ishall: false,
                        iscom: false
                    }
                }

            }
        }
    }
</script>

<style>
    .tabbar-component-container {
        text-align: center;
        border-bottom: 0.06rem solid #E1E1E1;
        padding: 0 0.6rem;
    }

    .tabbar-component-list {
        float: left;
        padding: 0;
        margin: 0;
    }

    .tabbar-component-item {
        /*width: 4.3rem;*/
        float: left;
        padding-right: 1.5rem;
        font-size: 0.9rem;
        line-height: 2.7rem;
        color: #666666;
        text-align: left;
    }

    .tci_activated {
        font-size: 1.0rem;
        color: #9852FF;
        font-weight: bold;
    }

    .tabbar-component-view {
        float: right;
        font-size: 0.9rem;
        color: #666666;
        line-height: 2.7rem;
    }

    .tabbar-component-view img {
         height:0.9rem;
        top: 2px;
        position: relative;
    }
</style>